<template>
  <div class="container">
    <h1>教练业绩管理</h1>
    <div class="coach-container">
      <div class="coach-header">
        <span>图像</span>
        <span>教练ID</span>
        <span>姓名</span>
        <span>所教学员数量</span>
        <span>通过率</span>
        <span>工资</span>
      </div>
      <div v-for="coach in coachInfo" :key="coach.id" class="coach-box">
        <img :src="coach.image" :alt="coach.name" class="coach-image"/>
        <span>{{ coach.id }}</span>
        <span>{{ coach.username }}</span>
        <span>{{ coach.stu_num }}</span>
        <span>{{ coach.pass_rate }}</span>
        <span>
          <button type="button" class="btn btn-primary" @click="showWageDialog(coach.id)" data-bs-toggle="modal" data-bs-target="#wageModal">
            发放工资
          </button>
        </span>
      </div>
    </div>
  </div>

  <!-- 发放薪资模态框 -->
  <div class="modal" tabindex="-1" id="wageModal" aria-labelledby="wageModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="wageModalLabel">发放工资</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <span>教练累积薪资：{{ currentWage }}</span>
          <input type="number" placeholder="请输入薪资" v-model="newWage" class="form-control mt-2" />
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" @click="addWage(currentCoachId, newWage)" data-bs-dismiss="modal">发放</button>
        </div>
      </div>
    </div>
  </div>


</template>

<script>
import CoachPerformance from "./js/CoachPerformance";
// 出口
export default CoachPerformance;
import './css/CoachPerformance.css';
</script>

<style scoped>

</style>